<template>
  <div class="evalute" v-if='showEvalute'>
    <div class="layerEvalute">
      <h2>
        客服评价
        <span class='closeEval' @click='closeEvalute'></span>
      </h2>

      <p>是否解决了您的问题？</p>

      <div class="btnBox" v-if='WhetherOpen'>
                    <span
                      v-for='(item,index) in status'
                      :key='index'
                      @click='currentSolve(item.solveStatus,item.currentResolve)'
                      :class='{on:item.solveStatus == solveTime}'>
                        {{item.solve}}
                    </span>

      </div>
      <!-- 评分和存在问题 -->
      <div class="resolved" v-if='currentResolve'>

        <p class='evaluateTipTitle'>请您对本次服务进行评价</p>

        <!-- 评价star -->
        <div class="star">
          <ul>
            <li v-for='item in num' @mouseover="over(item)" @mouseout="out()" @click='click(item)' :key='item'>
              <a href="#" :class="item <= n ? 'active' : ''"></a>
            </li>
          </ul>
        </div>

         <p class='evaluateTip' v-text='texts[n]'></p>
        <!-- 未解决的问题 -->
      <div v-if="unsolvedProblems">
        <p>存在以下哪些问题：</p>

        <div class="resolveBox">
          <div class="item"
               v-for='(item,index) in hasQuestion[n]'
               :key='index' :class="{activeItem:hasQuestionIndex[index]}"
               @click='currentQuestion(item,index)'>
            {{item.name}}
          </div>

        </div>

        <textarea v-model="content" :placeholder="contentPlaceholder[n]"></textarea>
      </div>



       
      </div>

      


      <a href="#" @click='submit' class='submit'>提交评价</a>

    </div>
  </div>
</template>

<script>
import bus from "./bus";
import chat from "../libs/chat";
import evalute from "../libs/evalute";

export default {
  name: "score",
  data() {
    return {
      unsolvedProblems: true,
      WhetherOpen: null, //是否开启已经解决问题的选项
      solveTime: 0,
      num: 5, //星星总数
      n: 5, //要高亮的星星最大值
      m: 5, //记录当前的分数
      showEvalute: false, //显示提交评价
      currentResolve: true,
      content: "", //留言的内容
      texts: [],
      hasQuestion: [],
      arr: [],
      contentPlaceholder: [],
      hasQuestionId: [],
      Submission: "", //提交成功的提示
      customer_id: chat.my().userId, //客户id
      status: [
        {
          solve: "已解决",
          solveStatus: 0,
          currentResolve: true
        },
        {
          solve: "未解决",
          solveStatus: 1,
          currentResolve: false
        }
      ],
      currentQuestionContent: [], //当前存在的问题
      hasQuestionIndex: []
    };
  },
  methods: {
    over(n) {
      this.n = n;
      this.hasQuestionIndex = [];
      this.currentQuestionContent = [];
    },
    out(n) {
      this.n = this.m;
    },
    click(i) {
      this.m = i;
      console.log(i);
      this.hasQuestionIndex = [];
      this.currentQuestionContent = [];
      if (this.m === 5) {
        this.unsolvedProblems = false;
      } else {
        this.unsolvedProblems = true;
      }
    },
    currentQuestion(item, index) {
      if (this.hasQuestionIndex.indexOf(index + 1) == -1) {
        this.hasQuestionIndex.push(index + 1);
      }
      if (this.currentQuestionContent.indexOf(item.id) == -1) {
        this.currentQuestionContent.push(item.id);
      }
      console.log(item, index);
    },
    currentSolve(id, currentResolve) {
      this.solveTime = id;
    },

    //获取服务的满意度评价
    getEvaluteServer(token) {
      evalute.Satisfaction(token, data => {
        let dataAll = data.data;
        let arrTitles = [],
          arr2Titles = [],
          arr3Titles = [],
          arr4Titles = [],
          arr5Titles = [];
        if (
          dataAll.stargrade1.titles &&
          dataAll.stargrade2.titles &&
          dataAll.stargrade3.titles &&
          dataAll.stargrade4.titles &&
          dataAll.stargrade5.titles
        ) {
          this.unsolvedProblems = true;
          let dataTitles = dataAll.stargrade1.titles;
          let data2Titles = dataAll.stargrade2.titles;
          let data3Titles = dataAll.stargrade3.titles;
          let data4Titles = dataAll.stargrade4.titles;
          let data5Titles = dataAll.stargrade5.titles;

          //可选标签
          for (let i in dataTitles) {
            arrTitles.push({
              id: i,
              name: dataTitles[i]
            });
          }
          console.log(arrTitles);
          this.hasQuestion[1] = arrTitles;

          for (let i in data2Titles) {
            arr2Titles.push({
              id: i,
              name: data2Titles[i]
            });
          }
          console.log(arr2Titles);
          this.hasQuestion[2] = arr2Titles;

          for (let i in data3Titles) {
            arr3Titles.push({
              id: i,
              name: data3Titles[i]
            });
          }
          console.log(arr3Titles);
          this.hasQuestion[3] = arr3Titles;

          for (let i in data4Titles) {
            arr4Titles.push({
              id: i,
              name: data4Titles[i]
            });
          }
          console.log(arr4Titles);
          this.hasQuestion[4] = arr4Titles;

          for (let i in data5Titles) {
            arr5Titles.push({
              id: i,
              name: data5Titles[i]
            });
          }
          console.log(arr5Titles);
          this.hasQuestion[5] = arr5Titles;
        } else {
          this.unsolvedProblems = false;
        }
        //星级介绍语
        this.texts[1] = dataAll.stargrade1.introduction;
        this.texts[2] = dataAll.stargrade2.introduction;
        this.texts[3] = dataAll.stargrade3.introduction;
        this.texts[4] = dataAll.stargrade4.introduction;
        this.texts[5] = dataAll.stargrade5.introduction;

        //评价内容
        this.contentPlaceholder[1] = dataAll.stargrade1.rate_word;
        this.contentPlaceholder[2] = dataAll.stargrade2.rate_word;
        this.contentPlaceholder[3] = dataAll.stargrade3.rate_word;
        this.contentPlaceholder[4] = dataAll.stargrade4.rate_word;
        this.contentPlaceholder[5] = dataAll.stargrade5.rate_word;

        console.log(this.contentPlaceholder);
        if (dataAll.switch_on.is_solve_problem === 1) {
          this.WhetherOpen = true;
        } else {
          this.WhetherOpen = false;
        }

        console.log(dataAll.switch_on.is_solve_problem);
      });
    },

    //提交评价
    submit() {
      let _self = this;
      switch (_self.currentResolve) {
        case "已解决":
          _self.m = 5;
          break;
        case "未解决":
          _self.m = 0;
          break;
      }
      chat.scoreCva(
        null,
        _self.currentResolve, //是否已解决
        _self.m, //评分
        _self.currentQuestionContent + _self.content, //存在的问题
        function(res) {
          if (res.code === 200) {
            bus.$emit("moreFun");
            _self.showEvalute = false;
            _self.Submission = res.data;
            alert("提交成功");
          } else if (res.code === 419) {
            console.log(res);
            if (res.message === "该会话已评分！") {
              alert(res.message);
              _self.showEvalute = true;
            }
          } else {
            alert(res.error);
          }
        }
      );
    },

    closeEvalute() {
      this.showEvalute = false;
      bus.$emit("moreFun");
    },

    openEvalute() {
      this.showEvalute = !this.showEvalute;
    }
  },
  mounted() {
    if (this.m === 5) {
      this.unsolvedProblems = false;
    } else {
      this.unsolvedProblems = true;
    }
  }
};
</script>


<style scoped>
h2,
p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: #333;
}

.evalute {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.67);
}

.layerEvalute {
  position: absolute;
  width: 100%;
  text-align: center;
  background: #fff;
  bottom: 0;
  left: 0;
}

.layerEvalute h2 {
  font-size: 1.2em;
  color: #333;
  height: 50px;
  line-height: 50px;
  position: relative;
  border-bottom: 1px solid #e6e7e7;
}

.resolveBox {
  display: flex;
  flex-wrap: wrap;
  width: 19.3rem;
  margin: 0 auto;
  cursor: pointer;
}

body .resolveBox .activeItem {
  background: #62bada;
  color: #fff;
  border: 1px solid #62bada;
}

.resolveBox .item {
  width: 42%;
  color: #8b98ad;
  border-radius: 5px;
  /* width: 142px; */
  /* height: 28px; */
  line-height: 28px;
  margin: 0.7rem;
  /* margin-bottom: 20px; */
  font-size: 1rem;
  border: 1px solid #e0e9e8;
  text-align: center;
}

.layerEvalute h2 span {
  display: block;
  width: 1rem;
  height: 1rem;
  right: 2rem;
  top: 1rem;
  position: absolute;
  background: url("../assets/CLOSE.png") center center no-repeat;
}

textarea {
  resize: none;
  width: 280px;
  height: 54px;
  outline: none;
  margin: auto auto 16px;
  font-size: 14px;
  color: #8b98ad;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #e0e9e8;
}

.layerEvalute p {
  margin: 1rem 0;
  font-size: 0.95rem;
}

.btnBox span {
  display: inline-block;
  padding: 0.3rem 1rem;
  margin: 0 0.8rem;
  border: 1px solid #dadcdc;
}

.btnBox .on {
  background: #62bada;
  color: #fff;
}

.layerEvalute .evaluateTipTitle {
  font-size: 0.85rem;
  color: rgba(51, 51, 51, 0.98);
}

.star ul {
  display: flex;
  width: 14rem;
  margin: 0 auto;
  text-align: center;
}

.star ul li {
  width: 3rem;
  height: 22px;
}

.star ul li a {
  display: block;
  width: 100%;
  height: 100%;
  background: url("../assets/star.gif") center center no-repeat;
  background-size: 1.5rem;
}

.star ul .active {
  background: url("../assets/onStar.gif") center center no-repeat;
  background-size: 1.5rem;
}

.evaluateTip {
  font-size: 0.76rem;
  color: #faba4a;
}

.submit {
  display: inline-block;
  width: 100%;
  padding: 1rem 0;
  background: #019fdf;
  color: #fff;
}
</style>
